<script setup lang="ts">
  import { ArrowDown } from '@element-plus/icons-vue'
  import CustomFieldModal from './CustomFieldModal.vue'
  import { PropType, ref } from 'vue'
  import {
    useFieldsEnable,
    useFieldsDisable,
    useFieldsDel,
    useFieldsMobileShowOrHide,
    useFieldsRequired,
  } from '@/services/pages/return-factory'
  import { operateType } from '@/components/pages/param-set/return-factory/custom-field/types'
  import { ElMessageBox } from 'element-plus'
  import infoTip from '@/config/info-tip'
  import { HMessage, HMessageBox } from '@/components/common/message'

  const { enable } = useFieldsEnable()
  const { disable } = useFieldsDisable()
  const { del } = useFieldsDel()
  const { show, hide } = useFieldsMobileShowOrHide()
  const { required, notRequired } = useFieldsRequired()

  defineOptions({
    name: 'HeaderReturnFactoryCustomField',
  })

  const props = defineProps({
    selectedFieldIds: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
  })

  const emits = defineEmits<{
    (e: 'update', value: string): void
  }>()

  const customFieldModalVisible = ref(false)
  const getFieldListKeyword = ref('')

  const handleOperate = (type: operateType) => {
    if (props.selectedFieldIds.length === 0) {
      HMessageBox.error(infoTip.returnFactory.customField.noSelectField)
      return
    }

    const msgOption: Record<operateType, string> = {
      enable: infoTip.returnFactory.customField.multipleEnable,
      disable: infoTip.returnFactory.customField.multipleDisable,
      del: infoTip.returnFactory.customField.multipleDel,
      mobileShow: infoTip.returnFactory.customField.multipleMobileShow,
      mobileHide: infoTip.returnFactory.customField.multipleMobileHide,
      required: infoTip.returnFactory.customField.multipleRequired,
      notRequired: infoTip.returnFactory.customField.multipleNotRequired,
    }
    ElMessageBox({
      title: '提示',
      type: type === 'del' ? 'error' : 'warning',
      message: msgOption[type],
      showCancelButton: true,
      beforeClose: async (action, instance, done) => {
        if (['close', 'cancel'].includes(action)) {
          done()
          return
        }

        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.cancelButtonLoading = true
          let res: APIResponse | null = null
          switch (type) {
            case 'enable':
              res = await enable(props.selectedFieldIds)
              break
            case 'disable':
              res = await disable(props.selectedFieldIds)
              break
            case 'del':
              res = await del(props.selectedFieldIds)
              break
            case 'mobileShow':
              res = await show(props.selectedFieldIds)
              break
            case 'mobileHide':
              res = await hide(props.selectedFieldIds)
              break
            case 'required':
              res = await required(props.selectedFieldIds)
              break
            case 'notRequired':
              res = await notRequired(props.selectedFieldIds)
              break
          }
          instance.confirmButtonLoading = false
          instance.cancelButtonLoading = false
          if (res.code === 20000) {
            const successMsgOption: Record<operateType, string> = {
              enable: infoTip.returnFactory.customField.multipleEnableSuccess,
              disable: infoTip.returnFactory.customField.multipleDisableSuccess,
              del: infoTip.returnFactory.customField.multipleDelSuccess,
              mobileShow: infoTip.returnFactory.customField.multipleMobileShowSuccess,
              mobileHide: infoTip.returnFactory.customField.multipleMobileHideSuccess,
              required: infoTip.returnFactory.customField.multipleRequiredSuccess,
              notRequired: infoTip.returnFactory.customField.multipleNotRequiredSuccess,
            }
            HMessage.success(successMsgOption[type])
            done()
            emits('update', '')
            return
          }

          HMessageBox.error(res.message)
        }
      },
    })
  }

  const getList = () => {
    emits('update', getFieldListKeyword.value)
  }
</script>

<template>
  <div class="header-return-factory-custom-field">
    <div class="btn-group">
      <h-plain-button @click="customFieldModalVisible = true">添加字段</h-plain-button>
      <el-dropdown trigger="click">
        <h-button :padding-right="8" :disabled="props.selectedFieldIds.length === 0">
          批量操作
          <el-icon>
            <ArrowDown></ArrowDown>
          </el-icon>
        </h-button>

        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleOperate('enable')">批量启用</el-dropdown-item>
            <el-dropdown-item @click="handleOperate('disable')">批量禁用</el-dropdown-item>
            <el-dropdown-item @click="handleOperate('del')">批量删除</el-dropdown-item>
            <el-dropdown-item @click="handleOperate('mobileShow')">批量移动端显示</el-dropdown-item>
            <el-dropdown-item @click="handleOperate('mobileHide')">批量移动端隐藏</el-dropdown-item>
            <el-dropdown-item @click="handleOperate('required')">批量必填</el-dropdown-item>
            <el-dropdown-item @click="handleOperate('notRequired')">批量不必填</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="search">
      <el-input
        v-model.trim="getFieldListKeyword"
        placeholder="请输入关键字"
        clearable
        @clear="getList"
        @keyup.enter="getList"
      />
      <h-button type="primary" @click="getList">
        <el-icon>
          <Search></Search>
        </el-icon>
        搜索
      </h-button>
    </div>

    <custom-field-modal
      v-model:visible="customFieldModalVisible"
      @update="getList"
    ></custom-field-modal>
  </div>
</template>

<style scoped lang="scss">
  .header-return-factory-custom-field {
    display: flex;
    justify-content: space-between;

    .search {
      display: flex;
      column-gap: 5px;

      :deep(.el-input) {
        width: 140px;
      }
    }

    .btn-group {
      display: flex;
      column-gap: 5px;
    }
  }
</style>
